<template>
  <div class="park-from">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" :size="size" v-if="show">
      <el-row>
        <template v-for="(item, index) in formConfig">
          <el-col :span="24">
            <el-form-item
              :label="item.label"
              :prop="item.prop"
              :required="item.required == true ? true : false"
              :label-width="item.labelWidth || labelWidth"
              :class="[{ 'yyt-cform-custom': item.custom }]"
              v-if="item.show === false ? false : true"
            >
              <template v-if="item.type === 'input'">
                <el-input
                  v-model="ruleForm[item.prop]"
                  :placeholder="
                    item.placeholder ? item.placeholder : '请输入' + item.label
                  "
                  :disabled="item.disabled == true ? true : false"
                  :maxlength="item.maxlength || 1000"
                  @change="change(item)"
                  :size="size"
                  v-if="
                    item.isReadonly != true && isRead != true ? true : false
                  "
                ></el-input>
                <div v-else style="height: 100%">
                  {{ ruleForm[item.prop] }}
                </div>
              </template>
              <template v-if="item.type === 'number'">
                <el-input-number
                  v-model="ruleForm[item.prop]"
                  controls-position="right"
                  :min="item.min || 0"
                  :max="
                    item.max == null && item.max != undefined && item.max != 0
                      ? 100000
                      : item.max
                  "
                  :size="size"
                  :precision="item.precision || 0"
                ></el-input-number>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>
<script setup>
import { ref, defineProps, onMounted, reactive, defineExpose } from 'vue';
const ruleFormRef = ref("")
const props = defineProps({
  formConfig: {
    type: Array,
    default: () => [],
  },
  size: {
    type: String,
    default: '',
  },
  isReadOnly: {
    type: Boolean,
    default: false
  }
});
const rules = reactive({
  name1:[
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ]
})
const show = ref(false)
const labelWidth = ref('100px');
const isRead = ref(false);
const ruleForm = ref({});
const change = () => {};

const init = () => {
  props.formConfig.forEach((a) => {
    if (
      a.type === 'input' ||
      a.type === 'point' ||
      a.type === 'radio' ||
      a.type === 'select' ||
      a.type === 'date' ||
      a.type === 'password' ||
      a.type === 'map' ||
      a.type === 'address' ||
      a.type === 'btn' ||
      a.type === 'codevalue' ||
      a.type === 'branch' ||
      a.type === 'dept' ||
      a.type === 'slot' ||
      a.type === 'textarea'
    ) {
      ruleForm.value[a.prop] = a.value || ""
      if (a.type == "radio") {
        if (a.value === null || a.value === "" || a.value === undefined) {
          ruleForm.value[a.prop] = ""
        } else {
          ruleForm.value[a.prop] = a.value
        }
      }
      if (a.assign) {
        ruleForm.value[a.assign] = a.assignValue || ""
      }
    } else if (
      a.type === "checkbox" ||
      a.type === "upload" ||
      a.type === "daterange"
    ) {
      ruleForm.value[a.assign] = a.value || []
    } else if (a.type === "number") {
      ruleForm.value[a.prop] = a.value || 0
    }

    if (!props.isReadOnly && !a.isReadOnly) {
      // 如果是只读不需要验证
      setRuleItem(a);
    }
    setCb(a);
  });
  show.value = true
};

const setCb = () => {

}
const setRuleItem = (item) => { 
  if (item.rules) {
    rules[item.prop] = item.rules
  } else if (
        item.required &&
        (item.type === "input" ||
          item.type === "point" ||
          item.type === "textarea" ||
          item.type === "code" ||
          item.type === "password")
      ) {
        rules[item.prop] = [
          {
            required: true,
            message: item.placeholder
              ? item.placeholder
              : "请输入" + item.label,
            trigger: "blur"
          }
        ]
      } else if (
        item.required &&
        (item.type === "select" ||
          item.type === "checkbox" ||
          item.type === "cascader" ||
          item.type === "upload" ||
          item.type === "btn" ||
          item.type == "daterange" ||
          item.type === "slot" ||
          item.type == "branch" ||
          item.type === "dept"
        )
      ) {
        rules[item.prop] = [
          {
            required: true,
            message: item.placeholder
              ? item.placeholder
              : "请选择" + item.label,
            trigger: "change"
          }
        ]
      } else if (item.type === "date" && item.required) {
        rules[item.prop] = [
          {
            type: 'string',
            required: true,
            message: item.placeholder
              ? item.placeholder
              : "请选择" + item.label,
            trigger: "change"
          },
          {
            type: 'string',
            required: true,
            message: item.placeholder
              ? item.placeholder
              : "请选择" + item.label,
            trigger: "blur"
          }
        ]
      }
}

const getValue = () =>  {
  return new Promise(async(resolve) => {
    await ruleFormRef.value.validate(valid => {
      if (valid) {
        resolve(ruleForm.value);
      } else {
        console.log(valid);
      }
    });
  });
}

const validateField = (prop) => {
  // this.$refs.ruleForm.validateField(prop);
}

defineExpose({
  ruleFormRef,
  getValue
})
onMounted(() => {
  init();
});
</script>
